<template>
  <el-dialog v-model="LogExport" width="500">
    <el-form :model="ExportCouts" label-width="auto" style="max-width: 600px">
      <el-form-item label="导出数量:">
        <el-input v-model="ExportCouts.cout" type="text" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="AllExport()">导出</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">

    <el-form-item label="编号">
      <el-input v-model="formInline.Menu_Code" placeholder="请输入编号" clearable />
    </el-form-item>
    <el-form-item label="菜单名称">
      <el-input v-model="formInline.Menu_Name" placeholder="请输入菜单名称" clearable />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="Show()">查询</el-button>
    </el-form-item>
  </el-form>

  <el-form :inline="true">
    <el-form-item>
      <el-button type="primary" @click="">删除</el-button>
      <el-button type="primary" @click="Show()">刷新</el-button>
      <el-button type="primary" @click="OppenExports()">导出</el-button>
    </el-form-item>
  </el-form>

  <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column prop="menu_Id" label="序号" width="auto">
      <template v-slot="scope">
        <el-checkbox-group v-model="addIds">
          <el-checkbox :value="scope.row.menu_Id">{{ scope.row.menu_Id }}</el-checkbox>
        </el-checkbox-group>
      </template>
    </el-table-column>

    <el-table-column prop="menu_Code" label="编号" width="auto" />
    <el-table-column prop="menu_Name" label="菜单名称" width="auto" />
    <el-table-column prop="parent_Menu" label="父级菜单" width="auto" />
    <el-table-column prop="type" label="类型（页面/Ajax请求/对话框等）" width="auto" />
    <el-table-column prop="style" label="样式（图标类名）" width="auto" />
    <el-table-column prop="sort" label="排序" width="auto" />
    <el-table-column prop="path" label="路径" width="auto" />
    <el-table-column prop="path" label="创建时间" width="auto" />
    <el-table-column label="操作" width="auto">
      <template v-slot="scoped">
        <el-button type="text" @click="Edit(scoped.row.menu_Id)">编辑</el-button>
        <el-button type="text" @click="Delete(scoped.row.menu_Id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
      <table>
        <thead>
            <tr>
                <td>
                    <el-pagination v-model:current-page="Page.pageIndex" v-model:page-size="Page.pageSize"
                        :page-sizes="[15, 20, 30, 40]" :background="true"
                        layout="total, sizes, prev, pager, next, jumper,slot" :total="Page.total" prev-text="上一页"
                        next-text="下一页">
                        共{{ Page.total }}条，共{{ Page.pageIndex }}\{{ Page.totalPage }}页
                    </el-pagination>
                </td>
            </tr>
        </thead>
    </table>
  <div class="table-footer">
    <div class="batch-actions">
      <el-button size="small" @click="selectAll()">全选</el-button>
      <el-button size="small" @click="reverseSelect()">反选</el-button>
      <el-select size="small" placeholder="批量操作" style="width: 120px;">
        <el-option label="批量删除" value="delete" @click="DeleteAll()" />
        <el-option label="批量导出" value="export" @click="OppenExportsAll()" />
      </el-select>
    </div>
  </div>
</template>

<script lang="ts" setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, ref ,watch} from 'vue'
import { http } from '@/axios/axiosHelpers'
import { systeamread } from '@/systeamaxios/sysaxiosHelpers'
const Oppen2 = ref(false)
const LogExport = ref(false)
const addIds = ref<any>([])
const ExportCouts = reactive({
  cout: ""
})
//表格加入

const bt = reactive({
  bid: 0
})
const formInline = reactive({
  Menu_Code: '',
  Menu_Name: ''
})
const tableData = ref([{
  "menu_Id": 0,
  "menu_Code": "",
  "menu_Name": "",
  "parent_Menu": "",
  "type": "",
  "style": "",
  "sort": 0,
  "path": "",
  "created_At": ""
}])
const Page = reactive({
  pageIndex: 1,
  pageSize: 15,
  total: 0,
  totalPage: 0
})
//保存选中的id
const handleSelectionChange = (selection: any[]) => {
  addIds.value = selection.map(item => item.rabit_Id)
}
//全部选中id
const selectAll = () => {
  addIds.value = tableData.value.map(item => item.menu_Id)
}
//反选
const reverseSelect = () => {
  addIds.value = tableData.value.filter(item => !addIds.value.includes(item.menu_Id)).map(item => item.menu_Id)
}

const OppenExportsAll = () => {
  let url = "http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/ResourcesesAll?Ids=" + addIds.value.toString();
  window.location.href = url
  addIds.value = []
}
const OppenExports = () => {
  LogExport.value = true
}
onMounted(() => {
  Show()
})
watch(Page,()=>{
  Show()
})
const AllExport = () => {
  let url = "http://112.126.93.146:8000/managementsysteamreadapis/api/ExportAll/ResourcesesExport?NumCout=" + ExportCouts.cout;
  window.location.href = url
  LogExport.value = false
}
const Show = () => {

  // http.get("/managementsysteamreadapis/api/ResourcesAll/ShowResources", {
  systeamread.get("/api/ResourcesAll/ShowResources", {
    params: {
      PageIndex:Page.pageIndex,
      PageSize:Page.pageSize,
      Menu_Code: formInline.Menu_Code,
      Menu_Name: formInline.Menu_Name
    }
  })
    .then(res => {
      tableData.value = res.data.data.data
      Page.total = res.data.total
      Page.totalPage=res.data.totalPage
      addIds.value = []
    })
}
const DeleteAll = () => {
  http.get("/managementsysteamreadapis/api/DepartMentAll/DelDepartMentAll",{
    params:{}
  })
}
const Delete = (id: number) => {
  if (!confirm("确定删除吗"))
    return;
  http.delete("/managementsysteamreadapis/api/ResourcesAll/DelResources", {
    params: {
      id: id
    }
  })
    .then(res => {
      ElMessage.success(res.data.message)
      Show()
    })
}
const Edit = (id: number) => {
  bt.bid = id
  Oppen2.value = true
}

</script>